/* 权重 */
/* 类选择器、属性选择器、伪类选择器，权重都是10 */



/* 属性选择器 */
/* 只选择属性名 */
button[disabled]{
    cursor: default;
}

/* 选择属性名和属性值 */
input[type='search']{
    color: red;
}


/* 是以icon开头的 */
div[class^='icon'] {
    color: red;
}


/* 是以icon结尾的 */
div[class$='icon'] {
    color: red;
}


/* 是包含icon的 */
div[class*='icon'] {
    color: red;
}







/* 结构伪类选择器 */

/* 匹配父元素中的第一个子元素 */
ul li:first-child {
    background-color: red;
}



/* 匹配父元素中最后一个元素 */
ul li:last-child{
    background-color: green;
}



/* 匹配父元素中的第n个子元素(第三个) */
/* 
n可以是数字、关键字和公式
n如果是数字，就算则第几个
常见的关键词有 even偶数  odd奇数
常见的公式如下(如果n是公式，则从0开始计算)
但是 第0个元素或者超出了元素的个数会被忽略

公式：
    2n 偶数
    2n+1 奇数
    5n  5 10 15.....以此类推
    n+5 从第五个开始(包含第五个)到最后
    -n+5 前5个(包含第5个)

*/
 */
ul li:nth-child(3){
    background-color: yellow;
}


/* 
<div>
    <p>p标签</p>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
</div>
*/
/* 我要选择上面的第2个可以用下面这种方式，div后面用空格表示 */
div :nth-child() {
    background-color: red;
}



/* 指定类型的第一个 */
div span:first-of-type{
    background-color: red;
}



/* 指定类型的最后一个 */
div span:last-of-type{
    background-color: yellow;
}


/* 指定类型的第n个 */
div span:nth-of-type(2) {
    background-color: red;
}




/* 伪元素选择器 */
/* 
    before和after必须有content属性
    before在内容的前面，after在内容的后面
    before 和 after 创建一个元素，但是属于行内元素
    因为在dom里面看不见刚才创建的元素，所以我们成为伪元素
    伪元素和标签选择器一样权重为1
*/

/* 在前面 */
div::before{
    content: "";
    width: 10px;
    height: 10px;
    background-color: red;
    display: block;
    position: absolute;
    left: -10px;
    top: 50%;
    margin-top: -5px;
    font-family: 'icomoon';  /*图标字体*/
}


/* 在后面 */
div::after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    position: absolute;
    right: -10px;
    top: 50%;
    margin-top: -5px;
}




/* 过渡效果 */
div{
    /* 第一种写法 */
    /* 第一个值规定过渡效果的属性 第二个值过渡的时间  第三个值速度效果的速度曲线  第四个值过度效果什么时候开始*/
    transition: property duration timing-function delay;

    /* 第二种写法 */
    transition-property: all;  /*规定过度效果的css属性的名称*/
    transition-duration: 2s;  /*规定完成过渡效果需要多少秒或者毫秒*/
    transition-timing-function: linear;  /**/
    /* linear ： 匀速运动 */
    /* ease：从慢到快 */
    /* ease-out : 从快到慢 */
    /* ease-in-out : 规定以慢速开始和结束的过渡效果 */
}


div{
    width: 100px;
    height: 30px;
    background-color: red;
    transition: all 1s linear 0.1s;
}        
div:hover{
    width: 300px;
}


/* 2D转换 */
/* 
    转换(transform):是css3中具有颠覆性的特征之一，可以实现元素的位移、缩放等效果
    转换可以理解为变形：
        移动(translate)
        旋转(rotate)
        缩放(scale)
*/


/* 移动translate */
/* 
    translate的重点：
        1.定义2D转换中的移动，沿着X和Y轴移动元素
        2.translate最大的优点，不会影响到其他元素的位置
        3.translate中的百分比单位是相对于自身元素的translate(50% 50%)
        4.对行内标签没有效果
 */
div{
    width: 100px;
    height: 100px;
    background-color: red;
    /* 第一个值是x轴的位置，第二个值是y轴的位置 */
    transform: translate(100px, 200px);
}



/* 可以使用transform:translate(-50%, -50%)来实现盒子里面的小盒子水平垂直居中 */
body div:first-of-type{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}

div div:first-child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    background-color: black;
    transform: translate(-50%, -50%);
}




/* 旋转(rotate) */
div{
    /* 语法 transform:rotate(度数) */
    /* 
        重点：
            roate里面跟度数，单位是deg 比如rotate(45deg)
            角度为正时，顺时针，负时，为逆时针
            默认旋转的中心是元素的中心点
     */
    transform: rotate(90deg);
}

/* 2d转换中心点transform-origin */
/* 可以设置元素转换的中心点 */
/* 语法：transform-origin:x y; */
/* 
    重点：
        注意后面的参数x 和 y 用空格隔开
        x y默认转换的中心点是元素的中心点(50% 50%)
        还可以给x y 设置向像素 或者 方位名词 (top bottom left right center)
 */

div{
    /* 修改转换的中心点 */
    transform-origin: 0 0;
}

div:hover{
    transform: rotate(360deg);
    
}



/* 字体横向 */
div{
    writing-mode: vertical-rl;  /*字体横向展示*/
}




/* 缩放(scale) */
/* 2D转换之缩放scale */
/* 缩放，顾名思义，可以放大和缩小。只要给元素添加上这个属性就能控制放大还是缩小  */
/* 
    注意：
        注意其中的x和y用逗号分隔
        transform:scale(1, 1)：宽和高都放大一倍，相对于没有放大
        transform:scale(2, 2): 宽和高都放大了2倍
        transform:scale(2) : 只写一个参数，第二个参数和第一个参数一样,相当于scale(2,2)
        transform:scale(0.5, 0.5): 缩小
        sacle缩放最大的优势：可以设置转换中心点，默认以中心点缩放的，而不影响其他盒子
*/


div:hover{
    /* transform: scale(x,y); */
    /* 里面的数字就是倍数 2就是两倍缩放 3就是三倍缩放 */
    transform: scale(2, 2);
}

/* 等比例缩放简单的写法 */
div:hover{
    /* 高度宽度都是等比例两倍缩放 */
    transform: scale(2);
}

/* 等比例缩小 */
div:hover{
    transform: scale(0.5, 0.5);
}





/* 2D转换综合写法 */
/* 
    注意：
        1.同时使用多个转换，其格式为：transform:translate() rotate() scale() 等。
        2.其顺序会影响转换效果。(先旋转会改变坐标轴方向)
        3.当我们同时有位移和其他的属性的时候，记得要将位移放到前面
*/
/* 2D转换综合性写法 */
div{
    margin: 100px auto;
    height: 200px;
    width: 200px;
    background-color: red;
    transition: all 2s ease-in-out;
}
div:hover{
    /* 综合属性的写法 */
    transform: translate(100px, 100px) rotate(180deg) scale(1.5);
}


/* 动画 */
/* 
    动画(animation)是css3中具有颠覆性的特征之一，
    可以通过设置多个节点来精确控制一个或一组动画，
    长用来实现复杂的动画效果，相较于过渡，
    动画可以实现更多变化，更多控制，连续自动播放等效果。


    动画的基本使用
        制作动画分为两步：
            1.先定义动画
            2.再使用(调用)动画

            1.(定义动画)用keyframes定义动画(类似定义类选择器)
                @keyframes 动画名称{
                    0%{
                        width:100px;
                    }
                    100%{
                        width:200px
                    }
                }
            2.(调用动画)
                div{
                    调用动画
                    animation: 动画名称;
                    
                    动画持续的时间
                    animation-duration:10s;
                }

    动画序列：
        1. 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
        2. 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新的样式的动画效果
        3. 动画是使用元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式的次数。
        4. 请用百分比来规定变化发生的时间，或用关键词 'form' 和 'to'，等同于0% 和 100%。


    reverse反转(反向播放)
*/

/* 需求：一开打页面就会有一个盒子从左边移动到右边 */
div{
    width: 200px;
    height: 200px;
    background-color: red;
    /* 调用动画 值就是动画名称*/
    animation: move;
    /* 动画持续的时间 */
    animation-duration: 10s;
    /* 设置动画永不停止,有这个属性的话，上面的属性可以删除了 */
    -webkit-animation: move 5s infinite ease-in-out;
}

@keyframes move{
    /* 开始状态 */
    0%{
        transform: translate(0px);
    }
    /* 结束状态 */
    100%{
        transform: translate(1000px);
    }
}




/* 常见的动画属性,分解属性 */
div{
    /* animation: ; 所有动画的简写属性 */
    animation-name: move;  /*设置动画的名称*/
    animation-duration: 5; /*设置动画所花费的时间*/
    animation-timing-function: ease-in-out;  /*动画的运动方式：默认是ease*/  /*steps()指定时间函数中间隔数量(步长)*/
    animation-delay: 0; /*设置动画什么时候开始,默认是0*/
    animation-iteration-count: 1; /*设置动画播放的次数，默认是1，可以设置infinite*/
    animation-direction: normal; /*规定动画是否在下一周期逆向播放，默认是noraml alternate逆向播放*/
    animation-play-state: running; /*规定动画是否在运行或暂停，默认是running 还有pause*/
    animation-fill-mode: forwards; /*规定动画结束后状态，保持forwards  回到起初backwards*/

}

/* 动画常见的属性，复合属性(简写) */
div{
    animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
    /* 例如 */
    animation: move 7s ease-in-out 0s infinite alternate backwards;

    /* 
        注意：
            简写属性里面不包含animation-play-state
            暂停动画：animation-play-state : puased; 经常和鼠标经过其他配合使用
            想要动画来回走，而不是直接跳回来：animation-direction ： alternate
            盒子动画结束后，停在结束位置：animation-fill-mode: forwards
     */
}



/* 如果一个元素要添加多个动画可以用逗号分隔开 */
div{
    animation: bear 1s steps(8) infinite,move 3s forwards;
}




/* 3D转换 */
/*
三维坐标系：
    三维坐标系起始就是指立体空间，立体空间是由3个轴体组成的。
        x轴：水平向右  注意：x右边是正值，左边是负值
        y轴：垂直向下  注意：y下面是正值，上面是负值
        z轴: 垂直屏幕  注意：往外面是正值，往里面是负值


    
    3D转换我们主要学习：3D位置 、 3D旋转
        主要知识点：
            3D位移:translate3d(x,y,z)
            3D旋转:rotate3d(x,y,z)
            透视:perspective
            3D呈现:transform-style

*/

/* 3D位移 */
div{
    transform: translate3d(100px,100px,100px);
}

/* 
透视perspective:
    在2D平面产生近大远小视觉立体，但是只能是二维的
        如果想要在网页中产生3D效果需要透视(理解成3D物体投影在2D平面内)
        模拟人类的视觉位置，可认为安排一只眼去看
        透视我们也成为视距：视距就是人的眼睛到屏幕的距离
        距离视觉点越近在电脑平面成像越大，越远成像越小
        透视单位是像素

    透视写在被观察元素的父盒子上面的
        d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
        z：就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。

*/
body{
    perspective: 200px;  /*透视(近大远小)*/
}
div{
    width: 100px;
    height: 100px;
    background-color: red;
    transform: translate3d(300px,100px,50px);
}

/*
3D旋转rotate3d
    3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
    语法：
        transform:rotateX(45deg) : 沿着x轴正方向旋转45度
        transform:rotateY(45deg) : 沿着y轴正方向旋转45deg
        transform:rotateZ(45deg) : 沿着z轴正方向旋转45deg
        transform:rotate3d(x,y,deg) : 沿着自定义轴旋转deg为角度

    3D旋转rotate3d
    transform:rotate3d(x,y,z,deg) : 沿着自动以轴旋转deg为角度
    x,y,z是表示旋转的矢量，是标示你是否希望沿着gian该轴旋转，最后一个是标示旋转的角度。
    写法：
        div{
            transform:rotate3d(1,1,0,45deg);
        }

*/


/*
    3D呈现：transform-style
        控制子元素是否开启三维立体环境
        transform-style:flat; 子元素不开启3d立体空间 默认的
        transform-style:preserver-3d; 子元素开启立体空间
        代码写给父级，但是影响的是子盒子
        这个属性很重要，后面必用
*/




/* 阴影 */
div{
    /* box-shadow: x轴偏移量 y轴偏移量 阴影模糊度 阴影大小 外阴影(默认是外阴影，inset设置为内阴影); */
    box-shadow: 5px 5px 5px 3px;


    /* 单独设置下边框的方法 */
    box-shadow: 0 3px 4px rgb(0 0 0 / 18%);


    /* 让收回来的时候也有过渡效果 */
    transition: box-shadow 3s ease-in-out, height 3s ease-in-out;
}




/* 渐变 */
/*
    css3渐变分为：镜像渐变，线性渐变
        在我们整个css教程中，基本没有考虑浏览器的兼容性问题，本章(css3渐变)是个例外，
        因为css3渐变的浏览器支持情况不太好，但同时它也比较重要，
        
        常见的浏览器内核有四种：
            1.Trident: iE, The World, 搜狗, 360,              -ms-
            2.Gecko  : Netscape6+, Fire Fox, SeaMonkey        -moz-
            3.Presto : Opera7+  (原内核: Presto,现内核:Blink)  -o-
            4.Webkit : Safari, Chrome                         -webkit-
*/

/* 线性渐变的语法 */
div{
    /* background: linear-gradient(方向, 什么颜色开始， 变成什么颜色); */
    background: -moz-linear-gradient(bottom right, red, blue);  /*火狐的*/
    background: -o-linear-gradient(bottom right, red, blue);  /*opera*/
    background: -webkit-linear-gradient(bottom right, red, blue); /*谷歌和苹果的*/
    background: linear-gradient(to bottom right, red, blue); /*标准语法*/
}

div{
    /*
    使用角度的方式设置方向：
        0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变，
        部分老浏览器使用旧的标准，即0deg将创建从左到右的渐变，90deg将创建一个
        从下到上的渐变。
    */
    background: linear-gradient(0deg, red, blue); /*标准语法*/
}





/* 镜像渐变 */
/*
    为了创建一个径向渐变，你也必须至少定义两种颜色结点，
    颜色结点即你想要呈现平稳过度的颜色，同时，你也可以制定渐变中心、形状
    (circle圆形或椭圆形)、大小、默认情况下，渐变的中心是center(表示在中心点),
    渐变的形状是ellipse(表示椭圆形),渐变的大小事farthest-corner(表示到最高的角落)

    语法：
        background: radial-gradient(center, shape size, start-color, ..., last-color);

        通过at关键字来设置渐变大小(或者是渐变起点的位置)
        background: radial-gradient(at 100px, red, pink);


    关键字：
        closest-side  渐变中心离容器最近的变作为终点
        closest-corner 渐变中心距离容器最近的角作为终止位置
        farthest-side  渐变中心距离容器最远的边作为终止位置
        farthest-corner(默认值) 渐变中心距离容器最近的角作为终点位置。

        语法：
        background: radial-gradient(closest-side, black, green);


        设置横轴和纵轴的距离
        background: radial-gradient(200px 100px, black 20px, red);


        可重复的线性渐变
        background: repeating-linear-gradient(red, green 10%, blue 20%);

        可重复的镜像渐变
        background: repeating-radial-gradient(red, blue 3%, green 6%);

*/

















/* 浏览器私有前缀 */

/* 
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。
    1.私有前缀
        -moz-   : 代表firefox浏览器私有属性
        -ms-    : 代表ie浏览器私有属性
        -webkit : 代表safari chrome私有属性
        -o-     : 代表Opera私有属性

    2.提倡的写法
        div{
            -moz-border-radius : 10px;
            -webkit-border-radius : 10px;
            -o-border-radius : 10px;
            border-radius : 10px;
        }
*/

















/* flex布局 */

/* 父级设置的属性 */
div{
    display: flex;
    flex-direction: column;  /*column竖着排列  row横着排列(flex默认的就是row)*/
    
    /* 设置主轴 */
    justify-content: center; /*设置主轴上子元素的排列方式  center居中   flex-start靠最左边  flex-end靠最右边  space-evenly平均分布*/

    /* 设置交叉轴 */
    align-items: center;  /*值和justify-content一致*/

    /* 当缩小窗口，内容大于窗口大小的时候，超出部分换行展示 */
    flex-wrap: wrap;
}


/* 子元素的属性设置 */

div{
    flex-grow: 1; /*填充父元素剩余的所有宽度或高度  flex-direction: column;就填充高度  否则就填充宽度*/ 
    flex-shrink: 0; /*设置元素不可挤压(默认是可压缩的)*/
    flex-basis: 100px; /*设置该元素他的宽度 auto如果该元素为指定宽度那么宽度由内容决定*/
    align-self: flex-start; /*可以覆盖父元素设置的交叉轴位置*/
    order: 3; /*可以在不修改元素顺序的的情况下调换元素的位置*/
}